import './CustomerDetail.scss'
import { useState, useEffect } from 'react';
import { Form, Input, Button, Select, Image, Modal, Row, Col, Space } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import CustomerEditor from '../CustomerEditor/CustomerEditor'
import FollowUpsituation from '../FollowUpsituation/FollowUpsituation'
import http from '../../../utils/http';
const { confirm } = Modal;
const { Option } = Select;
const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 17,
  },
};

const CustomerDetail = (props) => {
  const [form1] = Form.useForm();
  const [form2] = Form.useForm();
  const [isEditor, setEditor] = useState(false);
  const [isFollow, setFollow] = useState(false);
  const [followkey, setFollowkey] = useState(props.value4)
  const onFinish = (values) => {
    console.log(values);
  };

  useEffect(() => {
    console.log(props.value4);
    http({
      url: '/customer-development/findCustomerInfo',
      method: 'post',
      params: {
        cusId: props.value4
      }
    }).then((res) => {
      console.log('详情', res);
      res.data.CustomerInfoList.map((v, i) => {
        form1.setFieldsValue({
          name: v.personName,
          contact: v.personPhone,
          level: v.perGrade + '级',
          state: v.followState == 0 ? '流失' : (v.followState == 1 ? '意向' : '成交'),
          follower: v.adminName,
          contacts: v.adminPhone,
        })
      })
      res.data.customerNeedList.map((v, i) => {
        form2.setFieldsValue({
          area1: v.cusNeedMinsize,
          area2: v.cusNeedMaxsize,
          price1: v.cusNeedMinmoney,
          price2: v.cusNeedMaxmoney,
          use: v.cusNeedPurpose,
          house: v.room_no,
        })
      })
    })
  }, [])
  const backCar = () => {
    props.setAdd(false)
  }
  const bianji = () => {
    setEditor(true)
  }
  const genjin = () => {
    setFollow(true)
  }

  if (isEditor) {
    return <div>
      <CustomerEditor setEditor={setEditor} />
    </div>
  } else if (isFollow) {
    return <div>
      <FollowUpsituation followkey={followkey} setFollow={setFollow} />
    </div>
  } else {
    return (
      <div className='customerdetail'>
        <div>
          {/* 1、头部 */}
          <div className='header'>
            {/* 左边 */}
            <div className='tit'>
              <div></div>
              <div>客户信息详情</div>
            </div>
            {/* 右边 */}
            <div>
              <span className="iconfont icon-a-16guanbi" onClick={backCar}></span>
            </div>
          </div>
          <hr />
          {/* 2、内容 */}
          <div className='content'>
            <Row>
              <Col span={8}>
                <p>客户基本信息：</p>
                <Form {...layout} form={form1} name="control-hooks" onFinish={onFinish}>
                  <Form.Item
                    name="name"
                    label="客户名称"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Input placeholder='' disabled />
                  </Form.Item>
                  <Form.Item
                    name="contact"
                    label="联系方式"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Input placeholder='' disabled />
                  </Form.Item>
                  <Form.Item
                    name="level"
                    label="客户等级"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Select placeholder='' disabled>
                      <Option value='一级'>一级</Option>
                      <Option value='二级'>二级</Option>
                    </Select>
                  </Form.Item>
                  <Form.Item
                    name="state"
                    label="跟进状态"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Select placeholder='' disabled>
                      <Option value='成交'>成交</Option>
                      <Option value='意向'>意向</Option>
                    </Select>
                  </Form.Item>
                  <Form.Item
                    name="follower"
                    label="跟进人"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Input placeholder='' disabled />
                  </Form.Item>
                  <Form.Item
                    name="contacts"
                    label="联系方式"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Input placeholder='' disabled />
                    {/* <Select placeholder='' disabled>
                        <Option value='0'>电话</Option>
                        <Option value='1'>线下</Option>
                      </Select> */}
                  </Form.Item>
                </Form>
              </Col>
              <Col span={16}>
                <p>客户需求信息：</p>
                <Form form={form2} name="control-hooks" onFinish={onFinish}>
                  <Form.Item
                    name="area"
                    label="需求面积"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Form.Item name="area1">
                      <Input style={{ display: 'inline-block', width: 'calc(50% - 30px)' }} placeholder='' disabled />
                    </Form.Item>

                    <span
                      style={{ display: 'inline-block', width: '24px', textAlign: 'center' }}
                    >
                      ~
                    </span>
                    <Form.Item name="area2">
                      <Input style={{ display: 'inline-block', width: 'calc(50% - 30px)' }} placeholder='' disabled />
                    </Form.Item>
                    <span
                      style={{ display: 'inline-block', width: '24px', textAlign: 'center' }}>㎡</span>
                  </Form.Item>
                  <Form.Item
                    name="price"
                    label="预算价格"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Form.Item name="price1">
                      <Input style={{ display: 'inline-block', width: 'calc(50% - 30px)' }} placeholder='' disabled />
                    </Form.Item>

                    <span
                      style={{ display: 'inline-block', width: '24px', textAlign: 'center' }}
                    >
                      ~
                    </span>
                    <Form.Item name="price2">
                      <Input style={{ display: 'inline-block', width: 'calc(50% - 30px)' }} placeholder='' disabled />
                    </Form.Item>
                    <span
                      style={{ display: 'inline-block', width: '36px', textAlign: 'center' }}>㎡/月</span>
                  </Form.Item>
                  <Form.Item
                    name="use"
                    label="租户用途"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Input style={{ display: 'inline-block', width: 'calc(50% - 30px)' }} placeholder='' disabled />
                  </Form.Item>
                  <Form.Item
                    name="house"
                    label="意向房源"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Select placeholder='' style={{ display: 'inline-block', width: 'calc(50% - 30px)' }} disabled>
                      <Option value='A1幢'>A1幢</Option>
                      <Option value='C2幢'>C2幢</Option>
                    </Select>
                  </Form.Item>
                </Form>
              </Col>
            </Row>
          </div>
          {/* 3、尾部：保存、取消按钮 */}
          <div className='footer'>
            <Form.Item>
              <Space size='large'>
                <Button type="primary" onClick={bianji}>
                  编辑
                </Button>
                <Button onClick={genjin}>
                  跟进记录
                </Button>
              </Space>
            </Form.Item>
          </div>
        </div>
      </div>
    )
  }

}
export default CustomerDetail;